<template>
	<view class="page">
		<view class="code">
			<view class="t">
				输入短信验证码
			</view>
			<view class="c">
				验证码已发送至{{info.phone|formatNum}} <br>
				请在下方输入6位数验证码
			</view>
			<view class="b">
				<u-code-input disabledKeyboard="true" v-model="value2" color="#ffffff" bold="true" mode="line"
					@finish="finish"></u-code-input>
			</view>

			<view class="u-demo">
				<!-- <u-code :seconds="seconds" ref="uCode2" @change="codeChange" keep-running start-text=""></u-code>
				<text @tap="getCode" :text="tips" class="u-page__code-text">{{tips}}</text> -->
			<!-- 	
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-code>
						<u-button @tap="getCode">{{tips}}</u-button> -->
						 <u-count-down
						            :time="30 * 60 * 60 * 1000"
						            format="HH:mm:ss"
						            autoStart
						            millisecond
						            @change="onChange"
									@finish="ref"
						    >
						        <view class="time">
						            
						            <view class="time__custom">
						                <text v-if="show1" class="time__custom__item">{{ timeData.seconds }}s后重新发送</text>
										<text v-else @click="start">重新发送</text>
						            </view>
						        </view>
						    </u-count-down>
			</view>
		</view>

		<u-keyboard mode="number" :dotDisabled="true" :show="show" :tooltip="false" @backspace="backspace"
			@close="close" :overlay="false" @change="change"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					phone: "12345678910"
				},
				 timeData: {},
				tips:'',
				// refCode: null,
				seconds: 60,
				show: 1,
				value2: '',
				show1:1,
				type:0,
			}
		},
		filters: {
			formatNum(num) {
				// 手机
				return num.replace(/^(\d{3})\d{6}(\d+)/, "$1******$2")
			}
		},
		onLoad(e) {
			console.log("xxx")
			console.log(e)
			if (e.type == 1) {
				console.log("填东西")
				this.type=1
			}
		},
		methods: {
			 start() {
			                this.$refs.countDown.start();
			            },
			 onChange(e) {
			                this.timeData = e
			            },
			finish(e) {
				if(this.type){
					console.log("max")
					uni.navigateTo({
						url: '../Maxrealname/Maxrealname'
					})
				}
				uni.navigateTo({
					url: '../alterphone/alterphone'
				})
				
			},
			change(e) {
				console.log(e)

				this.value2 = this.value2 + e

				console.log(this.value2.length)
				if (this.value2.length == 6) {
					this.finish(this.value2)

				}

			},
		
			backspace() {

				let s = this.value2.toString()

				this.value2 = s.substring(0, s.length - 1)

				console.log(this.value2)
			},
		// 	codeChange(text) {
		// 		this.tips = text;
		// 	},
		// 	getCode() {
		// 		console.log("开始")


		// 		// 模拟向后端请求验证码
		// 		uni.showLoading({
		// 			title: '正在获取验证码'
		// 		})
		// 		setTimeout(() => {
		// 			uni.hideLoading();
		// 			// 这里此提示会被this.start()方法中的提示覆盖
		// 			uni.$u.toast('验证码已发送');
		// 			// 通知验证码组件内部开始倒计时
		// 			this.$refs.uCode2.start();
		// 		}, 100);



		// 	},
		// start() {
		// 		uni.$u.toast('倒计时开始');
		// 	}
		}
	}
</script>

<style scoped>
	>>>.u-keyboard {
		background-color: #464a48!important;
	}

	>>>.u-keyboard__button-wrapper__button {
		background-color: #252726!important;
	}

	>>>.u-keyboard__button-wrapper__button__text {
		color: #FFFFFF!important;
	}

	>>>.u-icon__icon {
		color: #FFFFFF !important;
	}

	>>>.u-keyboard__button-wrapper {
		box-shadow: none!important;
	}

	.code {
		width: 85%;
		margin: 100rpx auto;
	}

	.t {
		color: #FFFFFF;
		font-size: 48rpx;

	}

	.c {
		margin-top: 20rpx;
		color: #6f6f6f;
	}

	.b {
		display: flex;
		justify-content: center;
		margin-top: 80rpx;
	}

	.u-demo {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
	}
</style>
